import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:hotpot/widgets/widget_ext.dart';

import '../z_container.dart';

const _key = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '', '0', 'X'];

class NumKeyboard extends StatefulWidget {

  final ValueChanged<String>? onTap;

  const NumKeyboard({super.key, this.onTap});

  @override
  State<NumKeyboard> createState() => _NumKeyboardState();
}

class _NumKeyboardState extends State<NumKeyboard> {

  String? selectKey;

  @override
  Widget build(BuildContext context) {
    return GridView.builder(
      shrinkWrap: true,
      physics: const NeverScrollableScrollPhysics(),
      padding: const EdgeInsets.symmetric(horizontal: 17).r,
      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3, childAspectRatio: 44 / 31),
      itemBuilder: _item,
      itemCount: _key.length,
    );
  }

  Widget? _item(BuildContext context, int index) {
    var key = _key[index];
    if (key.isEmpty) return const SizedBox();
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        ZContainer(
          width: 44,
          height: 31,
          side: const BorderSide(width: 1, color: Color(0xFFF4F4F4)),
          radius: 5,
          color: selectKey != key ? null : const Color(0xFFF4F4F4),
          alignment: Alignment.center,
          child: key.text(size: 15, bold: true, color: Colors.black),
        ).inkWell(
          onHighlightChanged: (value) => onHighlightChanged(value, key),
          onTap: () => widget.onTap?.call(key),
        ),
      ],
    );
  }

  void onHighlightChanged(bool value, String key) {
    setState(() {
      if (value) {
        selectKey = key;
      } else {
        selectKey = null;
      }
    });
  }
}
